import React,{ useState, useEffect } from 'react';
import axios from 'axios';
import { apihook } from "../hooks"
import styles from './index.less';

import Banner from "./banner"  //  轮播图 组件
import Teacher from "./teacher"; // 讲师介绍
import Footer from "./footer"

import Test from "./test"
import Numclass from './test/class';
import Time from "./test/time"
import Time1 from "./test/timer1"
export default function IndexPage() {
  let width = () => {
    let html = document.getElementsByTagName("html")[0];
    let width = document.documentElement.clientWidth / 22;
    html.style.fontSize = width + "px";
  }
  width()
  window.onresize = function () { width() }

  const [img, setImg] = useState([])



  // const [num, setNum] = useState(10)
  // let timer;
  // useEffect(() => {
  //   if(num){
  //     timer = setTimeout(() => {
  //       setNum((num) => num -1)
  //       // console.log(num)
  //     }, 1000)  
  //   }
  // })
  // useEffect(() => {
  //   return () => {
  //       clearTimeout(timer)
  //       timer = null
  //       clearTimeout(timer_2)
  //       timer_2 = null
  //   }
  // })

  // const [num_2, setNum_2] = useState(3);
  // let timer_2
  // const handleBtnLoading = () => {
  //   setNum_2(3)
  // }
  // useEffect(() => {
  //   if(num_2) {
  //     timer_2 = setTimeout(() => {
  //       setNum_2(a => a -1)
  //       // console.log("num_2", num_2)
  //     }, 1000)
  //   }
  // })



  const initDataFn = async () => {  // 初始化数据
    let status = 1 // 讲师属性
    let pageNo = 1 //  传入的页数
    let username = ''  // 模糊搜索
    let tags = ''   //  标签搜索
    let res = await apihook({
      status,
      pageNo,
      username,
      tags
    })
    let resImg = res.data.data.List
    const newImg = resImg.map(i => ({img: i.img, id: i.id}))
    setImg([...newImg])

  }

  useEffect(() => {
    initDataFn()
    // let status = 1 // 讲师属性
    // let pageNo = 1 //  传入的页数
    // let username = ''  // 模糊搜索
    // let tags = ''   //  标签搜索
    // axios.get(`https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?status=${status}&pageNo=${pageNo}&username=${username}&tags=${tags}`).then(res => {
    //   // console.log("res::", res.data.data)
    //   let resImg = res.data.data.List
    //   // console.log(resImg)
    //   // let newImg = []
    //   const newImg = resImg.map(i => ({img: i.img, id: i.id}))
    //   setImg([...newImg])
    // }).catch(err => console.log("err:", err))
  }, [])



  return (
    <div>
      {/* 测试代码 */}
      {/* <h1> 测试案例 </h1>
      <Test num={num} ></Test>
      <hr />
      <div>
        函数组件：：
          {num_2 <= 0 ? "loading" : num_2 } { num_2 == 0 ? <button onClick={handleBtnLoading}>按钮</button> : null }
      </div>
      <hr />
      <Numclass /> */}
      {/* <Time n={5} /> */}


      {/* <Time1></Time1> */}


      {/* 轮播图 组件 */}
      { img.length > 0 && <Banner img={img} /> }

      {/* 讲师组件 */}
      <Teacher />

      {/* 导航条 + 搜索框 + 底部页面 渲染 */}
      <Footer />
    </div>
  );
}
